<template>
    <div class="login-container">
        <div class="flex justify-center items-center w-full h-full">
            <div class="w-1/2 flex justify-center items-center">
                <div class="text-center">
                    <h1 class="text-4xl font-bold mb-4">Welcome Back</h1>
                    <p class="text-xl opacity-80">后台管理系统</p>
                </div>
            </div>
            <div class="w-1/2 flex justify-center items-center">
                <div class="login-form-container backdrop-blur-md  rounded-lg p-8 w-96">
                    <h2 class="text-2xl font-bold mb-6 text-center">登录</h2>
                    <a-form :model="formData" @submit="handleSubmit">
                        <a-form-item field="username">
                            <a-input v-model="formData.username" placeholder="请输入用户名"
                                :style="{ backgroundColor: 'rgba(255, 255, 255, 0.1)', border: 'none' }">
                                <template #prefix>
                                    <icon-user />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item field="password">
                            <a-input-password v-model="formData.password" placeholder="请输入密码"
                                :style="{ backgroundColor: 'rgba(255, 255, 255, 0.1)', border: 'none' }">
                                <template #prefix>
                                    <icon-lock />
                                </template>
                            </a-input-password>
                        </a-form-item>
                        <div class="flex justify-between items-center mb-4">
                            <a-checkbox v-model="formData.remember">记住密码</a-checkbox>
                            <a-link>忘记密码？</a-link>
                        </div>
                        <a-button type="primary" html-type="submit" long :loading="loading">
                            登录
                        </a-button>
                    </a-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Message } from '@arco-design/web-vue'
import { useUserStore } from "@/utils/stores/modules/user"
import { PageEnum } from '@/utils/enums/pageEnums'

const userStore = useUserStore()
const route = useRoute()
const router = useRouter()

interface LoginForm {
    username: string
    password: string
    remember: boolean
}

const formData = reactive<LoginForm>({
    username: '',
    password: '',
    remember: false
})

const loading = ref(false)

const handleSubmit = async () => {
    if (!formData.username || !formData.password) {
        Message.error('请输入用户名和密码')
        return
    }
    
    loading.value = true
    try {
        await userStore.login(formData)
        Message.success('登录成功')
        const { query: { redirect } } = route
        const path = typeof redirect === 'string' ? redirect : PageEnum.HOME
        router.push(path)
    } catch (error: any) {
        Message.error(error.message || '登录失败')
    } finally {
        loading.value = false
    }
}
</script>

<style lang="scss" scoped>
/* From Uiverse.io by escannord */
.login-container {
    width: 100%;
    height: calc(100vh);

}

.login-form-container {
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.18);

}
</style>
